<template>
	<view class="container">
		<navBar isBack title="接单成功"></navBar>
		<view class="content">
			<view class="detail">
				<view class="title">
					您已接单成功！
				</view>
				<view class="info">
					去填写订单信息吧~
				</view>
				<view class="name">
					<text class="left">{{orderInfo.realname}}</text>
					<text class="center">{{orderInfo.phone}}</text>
					<text class="right" @click="toTelPhone">联系Ta</text>
				</view>
				<view class="order">
					<text class="left">订单编号：</text>
					<text class="right">{{orderInfo.order_no}}</text>
				</view>
				<view class="time">
					<text class="left">下单时间：</text>
					<text class="right">{{$utils.getFormatDate(orderInfo.create_time*1000,'yyyy-MM-dd hh:mm:ss')}}</text>
				</view>
			</view>
		</view>
		<view class="button">
			<u-button type="warning" shape="circle" @click="toDispose">处理订单</u-button>
		</view>
		
	</view>
</template>

<script>
	import service_constr from '@/service/constr.js'
	export default{
		data(){
			return{
				id:null,
				orderInfo:{}
			}
		},
		onLoad(options) {
			this.id = options.id
			this.getDetail()
		},
		methods:{
			getDetail(){
				service_constr.getDetail({id:this.id}).then(res=>{
					console.log(res,'订单详情')
					if(res.code==1){
						this.orderInfo = res.data?res.data:{}
					}
				})
			},
			// 处理订单
			toDispose(){
				uni.redirectTo({
					url:`/pages_decoration/home/buildOrder/dispose?id=${this.id}`
				})
			},
			// 电话联系
			toTelPhone(){
				console.log(this.orderInfo.phone,'电话电话')
				uni.makePhoneCall({
				 	// 手机号
				    phoneNumber: this.orderInfo.phone, 
					// 成功回调
					success: (res) => {
						console.log('调用成功!')	
					},
					// 失败回调
					fail: (res) => {
						console.log('调用失败!')
					}
				});
			}
		}
	}
</script>

<style scoped lang="less">
	.content{
		padding: 40rpx 24rpx;
		margin-bottom: 30rpx;
		.detail{
			background: url(https://manager.ryz1620.com/static/common/order-success.png) no-repeat;
			width: 702rpx;
			height: 646rpx;
			border-radius: 16rpx;
			padding:40rpx;
			.title{
				font-size: 40rpx;
				font-weight: 500;
				line-height: 40rpx;
				color: #0A0605;			
			}
			.info{
				font-size: 26rpx;
				font-weight: 400;
				line-height: 40rpx;
				color: #A0A0A0;
				margin: 30rpx 0;
			}
			.name{
				display: flex;
				margin-top: 120rpx;
				.left{
					font-size: 26rpx;
					font-weight: 500;
					line-height: 40rpx;
					color: #505050;
				}
				.center{
					margin: 0 22rpx;
					font-size: 26rpx;
					font-weight: 400;
					line-height: 40rpx;
					color: #505050;
				}
				.right{
					border-radius: 18rpx;
					padding: 8rpx 20rpx;
					background: #EABA6A;
					color: #fff;
				}
			}
			.order{
				margin: 30rpx 0;
				.left{
					color: #A0A0A0;
				}
				.right{
					
				}
			}
			.time{
				.left{
					color: #A0A0A0;
				}
				.right{
					
				}
			}
		}
		
	}
	.button{
			padding: 0 60rpx;
		}
</style>
